<template>
  <div>
    <div class="div_box">
      <span></span>
      <span>特色课</span>
      <van-icon name="search" @click="Seach" />
    </div>
    <!-- 筛选 -->
    <van-dropdown-menu>
      <van-dropdown-item title="分类">
        <p class="p1_coure_lxy">年级</p>
        <ul class="ul1_lxy">
          <li v-for="item in options1" :key="item.id">{{ item.text }}</li>
        </ul>
        <p class="p2_coure_lxy">学科</p>
        <ol class="ol1_lxy">
          <li v-for="item in options2" :key="item.id">{{ item.text }}</li>
        </ol>
        <div class="div_course_bottom">
          <button>重置</button>
          <button>确定</button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="排序">
        <div>
          <ul class="ul2_course_lxy">
            <li v-for="item in options3" :key="item.id">{{ item.text }}</li>
          </ul>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="筛选">
        <div>
          <ul class="ul3_course_lxy">
            <li v-for="item in options4" :key="item.id">{{ item.text }}</li>
          </ul>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>

    <!-- 图文 -->
    <div>
      <ul class="ul_box">
        <li v-for="item in addlist.list" :key="item.id">
          <div class="box">
            <p class="p1_lxy">{{ item.title }}</p>
            <p id="p2_lxy">
              <van-icon name="clock-o" />
              {{ item.start_play_date | filterstart }}~{{
                item.end_play_date | filterend
              }}
              | 共{{ item.course_type }}课时
            </p>
            <p>
              <img :src="item.teachers_list[0].teacher_avatar" />
              <span>{{ item.teachers_list[0].teacher_name }}</span>
            </p>
          </div>
          <div class="div_bottom_lxy">
            <p>{{ item.sales_num }}人已报名</p>
            <p id="p1"></p>
            <p @click="Todetail(item.id)" class="a1">免费</p>
          </div>
        </li>
      </ul>
    </div>

    <!-- 懒加载 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
    </van-list>
  </div>
</template>

<script>
import { lxycourse, classify } from "../request/http"; //课程详情接口
//按需引入vant组件
import { Icon } from "vant";
import { DropdownMenu, DropdownItem } from "vant";
import { List } from "vant";

export default {
  components: {
    [Icon.name]: Icon, //icon图标
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [List.name]: List,
  },
  data() {
    return {
      loading: false,
      finished: true,
      params: {
        page: 1,
      },
      addlist: {},
      options1: [
        { text: "初一", id: 1 },
        { text: "初二", id: 2 },
        { text: "初三", id: 3 },
        { text: "高一", id: 4 },
        { text: "高二", id: 5 },
        { text: "高三", id: 6 },
      ],
      options2: [
        { text: "语文", id: 1 },
        { text: "数学", id: 2 },
        { text: "物理", id: 3 },
        { text: "化学", id: 4 },
        { text: "英文", id: 5 },
      ],
      options3: [
        { text: "综合排序", id: 1 },
        { text: "最新", id: 2 },
        { text: "最热", id: 3 },
        { text: "价格从低到高", id: 4 },
        { text: "英文", id: 5 },
      ],
      options4: [
        { text: "全部", id: 1 },
        { text: "大班课", id: 2 },
        { text: "小班课", id: 3 },
        { text: "公开课", id: 4 },
        { text: "点播课", id: 5 },
        { text: "面授课", id: 5 },
        { text: "音频课", id: 5 },
        { text: "系统课", id: 5 },
        { text: "图文课", id: 5 },
        { text: "会员课", id: 5 },
      ],
    };
  },
  //   时间过滤器
  filters: {
    //开始的时间
    filterstart(val) {
      var date = new Date(val * 1000);
      var month = date.getMonth() + 1; //月
      var datee = date.getDate(); //星期
      var time = month + "月" + datee + "日";
      function getTimerr() {
        var time = new Date();
        var hour = time.getHours();
        hour = hour < 10 ? "0" + hour : hour;
        var minute = time.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        return hour + ":" + minute;
      }
      return time + " " + getTimerr();
    },
    //结束的时间
    filterend(vals) {
      var date = new Date(vals * 1000);
      var month = date.getMonth() + 1; //月
      var datee = date.getDate() + 5; //星期
      var time = month + "月" + datee + "日";
      function getTimerr() {
        var time = new Date();
        var hour = time.getHours();
        hour = hour < 10 ? "0" + hour : hour;
        var minute = time.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        return hour + ":" + minute;
      }
      return time + " " + getTimerr();
    },
  },
  mounted() {
    this.getcourse(); //调用特色课接口的方法
    this.grtclassify();
  },
  methods: {
    // 懒加载
    onLoad() {
      this.params.page++;
      console.log(this.params.page);
      lxycourse({ page: this.params.page }).then((res) => {
        console.log(res);
        // 加载状态结束
        this.loading = false;
        const { current_page, list, last_page } = res;
        console.log(res.last_page);
        //停止触发
        if (list.length == 0 && this.page != 1) {
          this.finished = true;
          this.onFinished && this.onFinished();
          return;
        }
        this.addlist.last_page = last_page;
        this.addlist.current_page = current_page;
        this.addlist.list = [...this.addlist.list, ...list];
      });
    },
    //跳转搜索页面
    Seach() {
      this.$router.push("/search");
    },
    // 分类
    grtclassify() {
      classify().then((res) => {
        console.log(res);
      });
    },
    //跳转详情页
    Todetail(id) {
      console.log(id);
      this.$router.push({ path: "/detail", query: { id } });
    },

    //获取特色课的接口
    async getcourse() {
      const res = await lxycourse();
      console.log(res);
      this.addlist = res;
      this.finished = false;
      console.log(this.addlist);
    },
  },
};
</script>


<style lang="scss">
* {
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
.div_box {
  width: 100%;
  height: 60px;
  // background: red;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid lightgray;
}
// 图文
.ul_box {
  width: 100%;
  li {
    background: white;
    width: 100%;
    height: 200px;
    border-radius: 10px;
    margin-top: 10px;
    .p1_lxy {
      width: 100%;
      font-size: 20px;
      padding-top: 20px;
      margin-left: 20px;
    }
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      padding-top: 10px;
      margin-left: 20px;
    }
    span {
      display: inline-block;
      font-size: 15px;
      color: #cccccc;
      margin-left: 15px;
    }
    .box {
      border-bottom: 2px solid gainsboro;
      width: 98%;
      height: 140px;
      margin-top: 10px;
      margin-left: 3px;
    }
    #p2_lxy {
      font-size: 13px;
      margin-top: 5px;
      margin-left: 20px;
      color: rgb(87, 83, 83);
    }
    .div_bottom_lxy {
      width: 100%;
      height: 60px;
      //   background: lavender;
      display: flex;
      align-items: center;
      justify-content: space-around;
      p {
        &:nth-child(1) {
          color: #cccccc;
          font-size: 15px;
        }
        &:nth-child(2) {
          width: 50%;
        }
      }
      .a1 {
        color: rgb(132, 177, 42);
        font-size: 17px;
      }
    }
  }
}
.option1 {
  display: flex;
  width: 30%;
}
.p1_coure_lxy {
  font-size: 15px;
  margin-left: 20px;
  padding-top: 20px;
}
.ul1_lxy {
  width: 96%;
  height: 70px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 2px solid lightgrey;

  li {
    margin-top: 10px;
    width: 15%;
    text-align: center;
    height: 30px;
    line-height: 30px;
    background: #f5f5f5;
    font-size: 15px;
    &:hover {
      background: #ebeefe;
      color: orangered;
      cursor: pointer;
    }
  }
}
.p2_coure_lxy {
  font-size: 15px;
  margin-left: 20px;
  padding-top: 20px;
}
.ol1_lxy {
  width: 96%;
  height: 60px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  border-bottom: 2px solid lightgrey;

  li {
    margin-top: 10px;
    width: 15%;
    text-align: center;
    height: 30px;
    line-height: 30px;
    background: #f5f5f5;
    font-size: 15px;
    &:hover {
      background: #ebeefe;
      color: orangered;
      cursor: pointer;
    }
  }
}
.div_course_bottom {
  padding-top: 30px;
  height: 80px;
  button {
    margin: 5px;
    &:nth-child(1) {
      width: 45%;
      font-size: 15px;
      height: 30px;
      background: #d3d1d1;
      border: 0px;
    }
    &:nth-child(2) {
      width: 45%;
      font-size: 15px;
      height: 30px;
      background: #eb6100;
      color: white;
      border: 0px;
    }
  }
}
.ul2_course_lxy {
  li {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid rgb(236, 236, 236);
    font-size: 15px;
    text-align: center;
    line-height: 50px;
    &:hover {
      color: orange;
    }
  }
}
.ul3_course_lxy {
  width: 100%;
  height: 150px;
  display: flex;
  justify-self: left;
  flex-wrap: wrap;
  li {
    margin-top: 10px;
    width: 21%;
    text-align: center;
    margin-left: 10px;
    height: 30px;
    line-height: 30px;
    background: #f5f5f5;
    font-size: 15px;
    &:hover {
      background: #ebeefe;
      color: orangered;
      cursor: pointer;
    }
  }
}
</style>